<template>
	<view class="container" v-if="show">
		<nav-header title="负责人设置" custom-nav>
		</nav-header>
		<view class="personnel">
			<view>请选择负责人：</view>
			<view  class="data-select">	<uni-data-select
			  v-model="value3"
			  :clear="false"
			  :localdata="options"
			  @change="change"
			 
			></uni-data-select></view>
		
		</view>
		<view class="personnel">
			<view>请选择部门：</view>
			<view  class="data-select" style="margin-left: 16px;">	<uni-data-select
			  v-model="value3"
			  :clear="false"
			  :localdata="options"
			  @change="change"
			></uni-data-select></view>
		</view>
		<button class="custom-button">确认设置</button>
		<view class="info">负责人列表：</view>
		<viwe class="roleList">
			<view class="warpper">
				<image class="warpper-img" src="https://img2.baidu.com/it/u=1268794162,306109073&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></image>
				<view class="comapny-title">
					<view class="first-item">
						<view class="nick-name">李四</view>
						<view class="first-item-role">
							<view class="info-text">@人事部经理</view>
							<view class="info-text">10：30</view>
						</view>
					</view>
				<view class="comapny-authentication">@人事部经理 @行政部经理</view>
				<view class="comapny-authentication">@人事部经理 @行政部经理</view>
				<view class="info-text">入职时间：2001年5月1日</view>
				<view class="working-years"><view class="info-text">工龄：24年</view><view>
				<button class="edit-role" @tap="editRole">编辑角色</button></view></view>	
				</view>
			</view>
		</viwe>
	</view>
	
	
	
	<view class="container" v-else>
		<nav-header title="编辑角色" custom-nav>
			<template v-slot:left>
			<view class="icon-text"@tap="backToApplication()">
				<uni-icons type="back"  size="28">
				</uni-icons>
				<text  style="color: blue; font-size:18px">返回</text>
			</view>		
			</template>
		</nav-header>
		<viwe class="roleList">
		<view class="warpper">
			<image class="warpper-img" src="https://img2.baidu.com/it/u=1268794162,306109073&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></image>
			<view class="comapny-title">
				<view class="first-item">
					<view class="nick-name">李四</view>
					<view class="first-item-role">
						<view class="info-text">@人事部经理</view>
					</view>
				</view>
			<view class="comapny-authentication">@人事部经理 @行政部经理</view>
			<view class="comapny-authentication">@人事部经理 @行政部经理</view>
			<view class="info-text">入职时间：2001年5月1日</view>
			<view class="working-years"><view class="info-text">工龄：24年</view></view>	
			</view>
		</view>
		</viwe>
		<view class="info-text" style="margin-top: 20rpx;margin-bottom: 20rpx;">提示：默认以排序第一个角色作为对外展示角色</view>
		<view>
			<view class="input-item" v-for="(role, index) in roles" :key="index">
			      角色{{ index + 1 }}：
			      <up-input
			        class="input"
			        placeholder="请输入内容"
			        v-model="roles[index]"  
					style="width: 200rpx"
			      />
			      <view class="icon-arrow">
			        <up-icon v-if="index !== 0" name="arrow-upward" size="28" color="#2979ff" @click="moveUp(index)"></up-icon>
			        <up-icon v-if="index !== roles.length - 1" name="arrow-downward" size="28" color="#2979ff" @click="moveDown(index)"></up-icon>
			      </view>
			    </view>
		</view>
		<button class="custom-button" @click="svaeSetting">确认设置</button>
		<view class="info-text" style="margin-top: 20rpx;margin-bottom: 20rpx;">修改结果将发送平台消息通知 <text style="color:#FFD15A ;">@李四</text></view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	const show = ref(true)
	// 定义假数据
	const options = [
	  { value: '0', text: '李四' },
	  { value: '1', text: '张三' },
	  { value: '2', text: '王五' }
	];
	const value1 = ref('0');
	
	// 定义响应式数据
	const roles = ref(['财务部经理', '人事部经理', '行政部经理']);
	
	// 处理输入框变化
	const change = (event) => {
	  console.log('Input changed:', event.target.value);
	};
	
	// 将指定索引的角色向上移动一位
	const moveUp = (index) => {
	  console.log('Moving up:', index);
	  if (index > 0) {
	    const temp = roles.value[index];
	    roles.value[index] = roles.value[index - 1];
	    roles.value[index - 1] = temp;
	  }
	};
	
	// 将指定索引的角色向下移动一位
	const moveDown = (index) => {
	  console.log('Moving down:', index);
	  console.log(' roles.value.length', roles.value.length)
	  if (index < roles.value.length - 1) {
	    const temp = roles.value[index];
	    roles.value[index] = roles.value[index + 1];
	    roles.value[index + 1] = temp;
	  }
	};
	const svaeSetting = () =>{
		console.log(roles.value)
	}
	const editRole = () => {
		show.value = false
	}
	const backToApplication = ()=>{
		show.value = true
	}
</script>

<style lang="less" scoped>
	.container{
		margin: 20rpx;
		.icon-text{
				 display: flex;
				 /* gap: 3px; */
				 align-items: center;
				 justify-items: center;
		}
		.personnel{
			margin-top: 10rpx;
			display: flex;
			align-items: center;
			.data-select{
				flex: 1;
				
			}
		}
		
		.custom-button {
		  margin-top: 20rpx;
		  background-color: #1989FA; /* 修改背景色为蓝色 */
		  color: white; /* 文字颜色为白色 */
		  border: none; /* 去掉边框 */
		}
		.info-text{
			color: #7F7F7F;
			font-size: 24rpx;
		}
		.info{
			margin-left: 10rpx;
			color: #7F7F7F;
			margin-top: 10rpx;
			margin-bottom: 10rpx;
		}
		.roleList{
			margin-top: 10rpx;
			.warpper{
				display: flex;
				align-items: center;
				gap: 20rpx;
				.warpper-img{
					height: 200rpx;
					width: 200rpx;
				}
				.comapny-title{
					flex: 1;
					color: #333333;
					.first-item{
						display: flex;
						.nick-name{
							font-size: 38rpx;
							font-weight: bold;
						}
						.first-item-role{
							flex: 1;
							display: flex;
							justify-content: space-between;
						}
					}
					.comapny-authentication{
						margin-top: 10rpx;
						font-size: 25rpx;
						font-weight: normal;
						color: #FFD15A;
					}
				}
				.working-years{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.edit-role{
						background-color: #1989FA; /* 修改背景色为蓝色 */
						color: white; /* 文字颜色为白色 */
						font-size: 22rpx;
					}
				}
			}
		}
		.input-item{
			display: flex;
			align-items: center;
			margin-top: 20rpx;
		}
		.icon-arrow{
			width: 110rpx;
			display: flex;
		}
	}  
</style>
